<template>
	<div class="theme">
		<van-nav-bar title="提币" left-arrow @click-left="$router.back(-1)"></van-nav-bar>
		<div class="overlay headTop">
			<div class="overlay-content scrolling">
				<div class="ext-title">
					USDT
				</div>
				<div class="ext-content">
					<div class="mt10">
						<p>到账地址</p>
						<p>
							<van-field v-model="address" right-icon="question-o" placeholder="输入或者长按粘贴地址" maxlength="20">
								<div slot="right-icon" @click="$router.push({path:'Qr'})">
									<img src="../assets/images/qr.png" width="20px" style="vertical-align: middle; position: relative; top: -1px;" v-if="qrShow" />
								</div>
							</van-field>
						</p>
					</div>
					<div class="mt10">
						<p>数量</p>
						<p>
							<van-field v-model="num" right-icon="question-o" placeholder="请输入数量" maxlength="20" disabled @click="showKeyboard = true;">
								<div slot="right-icon">
									<span style="color: #999899;">USDT</span>
									<span style="color: #3fb8e4;border-left: 1px solid #f3f3f3;padding-left: 5px;margin-left: 3px;" @click="all">全部</span>
								</div>
							</van-field>
						</p>
						<p style="color: #999899;margin-top: 10px;">可用 <span v-text="balance"></span> USDT</p>
					</div>
					<div class="mt10 fee">
						<p>矿工费</p>
						<p>
							<van-field v-model="fee" right-icon="question-o" placeholder="输入或者长按粘贴地址" disabled>
								<div slot="right-icon">
									<span style="color: #999899;">USDT</span>
								</div>
							</van-field>
						</p>
					</div>
					<div class="mt10 pwd">
						<p>交易密码</p>
						<p>
							<van-field type="password" v-model="password" placeholder="请输入交易密码" disabled @click="showKeyboard2 = true"></van-field>
						</p>
					</div>

					<div class="ext-submit">
						<van-button type="default" size="normal" color="#3fb8e4" :loading="loading" @click="submit">提币</van-button>
					</div>
				</div>
			</div>
		</div>
		<van-number-keyboard :show="showKeyboard" @input="onInput" @delete="onDelete" @blur="onClose" extra-key="." />
		<van-number-keyboard :show="showKeyboard2" theme="custom" close-button-text="完成" @input="onInput2" @delete="onDelete2" @blur="showKeyboard2 = false" />
	</div>
</template>

<script>
	let _this;
	import { base } from '../utils/api.js'
	export default {
		name: 'Extract',
		components: {},
		props: {},
		data() {
			return {
				address: '',
				num: '',
				balance: '0.0000',
				password: '',
				fee: 0,
				loading: false,
				qrShow: false,
				showKeyboard: false,
				showKeyboard2: false,
			};
		},
		beforeCreate() {
			_this = this;
		},
		watch: {},
		computed: {},
		methods: {
			onInput(val) {
				if(this.num.includes('.') && val === '.') {
					return false;
				}
				if(this.num.indexOf('.') != -1 && this.num.indexOf('.') + 4 < this.num.length) {
					return false;
				}
				this.num += val;
				this.getFee();
			},
			onDelete() {
				this.num = this.num.slice(0, -1)
				this.getFee();
			},
			all() {
				this.num = this.balance;
				this.getFee();
			},
			onClose() {
				this.showKeyboard = false;
				Number(this.num) > Number(this.balance) ? this.num = this.balance : '';
			},
			onInput2(val) {
				this.password.length < 6 ? this.password += val : '';
			},
			onDelete2() {
				this.password = this.password.slice(0, -1);
			},
			getFee() {
				if(this.num == '') {
					return false;
				}
				this.axios.get(process.env.API_HOST + "user/tansfer/fee/" + this.num + '/1').then(res => {
					if(res.data.code == 200) {
						this.fee = parseFloat(res.data.data).toFixed(5).slice(0, -1);
					}
				});
			},
			submit() {
				this.loading = true;
				base.getCredentials().then(res => {
					if(res.code == 8008) {
						this.k = res.data.k;
						this.v = res.data.v;
						base.getTransfer({
							'coinId': 1,
							'num': this.num,
							'key': this.k,
							'sign': this.rsaEncrypt(this.password + ',' + this.address + ',' + this.v)
						}).then(res => {
							if(res.code == 200) {
								setTimeout(() => {
									this.loading = false;
									this.num = '';
									this.address = '';
									this.fee = 0;
									this.password = '';
								}, 500)
							} else {
								setTimeout(() => {
									this.loading = false;
									this.$toast(res.msg);
								}, 500)
							}
						})
					}
				})
			}
		},
		created() {},
		mounted() {
			if(window.plus) {
				qrShow = true;
			}
			base.getUserBalance().then(res => {
				if(res.code == 200) {
					this.balance = parseFloat(res.data).toFixed(5).slice(0, -1);
				}
			})
		},
		destroyed() {

		},
		filters: {}
	};
</script>

<style lang="less" scoped>
	.overlay-content {
		padding: 10px;
		.ext-title {
			background: #f7f7fb;
			padding: 10px;
			border-radius: 5px;
			margin: 10px 0;
			font-weight: 500;
		}
		.ext-content {
			/deep/ .van-field {
				border-bottom: 1px solid #f3f3f3;
			}
			.pwd {
				/deep/ .van-cell {
					padding: 10px;
					background: #f5f5f5;
					margin-top: 10px;
				}
				/deep/ input::-webkit-input-placeholder {
					color: #999899 !important;
				}
				/deep/ input::-moz-placeholder {
					/* Firefox 19+ */
					color: #999899 !important;
				}
				/deep/ input:-ms-input-placeholder {
					/* IE 10+ */
					color: #999899 !important;
				}
				/deep/ input:-moz-placeholder {
					/* Firefox 18- */
					color: #999899 !important;
				}
			}
			.ext-submit {
				.van-button {
					width: 90%;
					margin-left: 5%;
					margin-top: 50px;
					border-radius: 5px;
				}
			}
		}
		.fee {
			/deep/ .van-field__control:disabled {
				color: #000000 !important;
				-webkit-text-fill-color: #000000 !important;
			}
		}
	}
	
	.mt10 {
		margin-top: 20px;
	}
	
	/deep/ input::-webkit-input-placeholder {
		/* Chrome/Opera/Safari */
		color: #cccccc !important;
	}
	
	/deep/ input::-moz-placeholder {
		/* Firefox 19+ */
		color: #cccccc !important;
	}
	
	/deep/ input:-ms-input-placeholder {
		/* IE 10+ */
		color: #cccccc !important;
	}
	
	/deep/ input:-moz-placeholder {
		/* Firefox 18- */
		color: #cccccc !important;
	}
	
	/deep/ .van-cell {
		padding: 10px 0;
	}
	
	/deep/ .van-nav-bar {
		background-color: #43add5;
	}
	
	/deep/ .van-nav-bar .van-icon {
		color: white;
	}
	
	/deep/ .van-nav-bar__title {
		color: white;
	}
	
	/deep/ .van-nav-bar__arrow {
		font-size: 18px;
	}
</style>